<template>
  <div>
      <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/main/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/main/UserManagement'}">用户管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/main/RoleManagement'}">角色管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/main/MenuManagement'}">菜单管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{path:'/main/CompanyManagement'}">公司管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true"   :model="formData">
          <el-form-item label="权限名称">
          <el-input placeholder="请输入权限名称" v-model="formData.name" clearable @clear="queryList"/>
          </el-form-item>
          <el-form-item label="权限类型">
          <el-input placeholder="请输入权限类型" v-model="formData.type" clearable @clear="queryList"/>
          </el-form-item>
          <el-form-item >
              <el-button type="primary" @click="queryList">搜索</el-button>
              <el-button type="primary" :title="title" @click="add1">新增权限</el-button>
              <el-button type="danger" @click="removBatch">批量删除</el-button>
          </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%"  @selection-change="handleSelectionChange" ref="multipleTableRef">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="权限名称" width="100" />
      <el-table-column prop="type" label="权限类型" width="150">
          <template #default="scope">
          <el-tag v-if="scope.row.type == 1">目录</el-tag>
          <el-tag type="success" v-if="scope.row.type == 2">菜单</el-tag>
          <el-tag type="info" v-if="scope.row.type == 3">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="percode" label="权限编码" width="150" />
      <el-table-column prop="parentId" label="父节点ID" width="150"/>
      <el-table-column prop="sort" label="排序" width="100" >
      </el-table-column>
      <el-table-column prop="address" label="操作" >
        <template #default="scope">
          <el-button size="mini" type="primary" :title="title" @click="edit1(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
          <div class="demonstration"></div>
          <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          />
      </div>
      <el-dialog v-model="dialogFormVisible" :title="title" width="500" @close="cancel">
        <el-form :model="form">
          <el-form-item label="权限名称" :label-width="formLabelWidth">
            <el-input v-model="permissionData.name" placeholder="请输入权限名称"/>
          </el-form-item>
          <el-form-item label="权限类型" :label-width="formLabelWidth">
            <el-input v-model="permissionData.type" placeholder="请输入权限类型"/>
          </el-form-item>
          <el-form-item label="权限URL" :label-width="formLabelWidth">
            <el-input v-model="permissionData.percode" placeholder="请输入权限URL"/>
          </el-form-item>
          <el-form-item label="权限编码" :label-width="formLabelWidth">
            <el-input v-model="permissionData.percode"  placeholder="请输入权限编码"/>
          </el-form-item>
          <el-form-item label="父节点ID" :label-width="formLabelWidth">
            <el-input v-model="permissionData.parentId"  placeholder="请输入父节点ID"/>
          </el-form-item>
          <el-form-item label="排序序号" :label-width="formLabelWidth">
              <el-input v-model="permissionData.sort"  placeholder="请输入排序序号"/>
          </el-form-item>
        
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancle">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script setup>
import { ref,onMounted,getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';

const currentInstance = getCurrentInstance()
const {$http}=currentInstance.appContext.config.globalProperties;
const tableData= ref([])
const dialogFormVisible = ref(false)
let title = ref()

//批量删除
const selectable = (row) => ![].includes(row.id)
const handleSelectionChange = (val) => {
formData.value.ids = val.map(item => item.id);
}

const formData = ref({
name:'',
type:'',
pageNum:1,
pageSize:5,
ids:[]
})



const permissionData= ref({
id:'',
name:'', 
type:'', 
url:'',
percode:'',
parentId:'',
sort:''
})

onMounted(()=>{

queryList();
});

function handleSizeChange(val) {
    formData.value.pageSize=val
    queryList();
}
function handleCurrentChange(val) {
    formData.value.pageNum=val
    queryList();
}


function queryList(){
$http({
  method:'get',
  url:'http://localhost:8081/sfzy/sysPermission/page',
  params:formData.value
}).then(res=>{
  tableData.value = res.data.data.list;
})
}

function removBatch(){
      ElMessageBox.confirm('是否确认删除选中的数据?', '删除', 
          {
          confirmButtonText: '确认', // 确认按钮
          cancelButtonText: '取消', // 取消按钮
          type: 'warning',// 警告的图标
          }
      )
      .then(() => {
        const idsArray = formData.value.ids;
        const idsStr = idsArray.join(",");
        console.log(idsStr);
        
         // 点击确认 删除操作
          $http({
              method:'delete',
              url:`http://localhost:8081/sfzy/sysPermission/page?ids=${idsStr}`,
              data:{}
          }).then(res=>{
              if(res.status== 200){
                  ElMessage.success('删除成功')
                  // 判断当前页是否还有数据，如果没有则将页码减1
                  if (tableData.value.length === 0 && formData.value.pageNum > 1) {
                   formData.value.pageNum--;
              }
              // 清理ids参数
              formData.value.ids = [];
                  queryList();
              }else{
                  ElMessage.error('删除失败')
              }
          })
      })
      .catch(() => {
          ElMessage({
              type: 'info',
              message: "取消删除操作",
          })
})}
      
function remove(id){
      ElMessageBox.confirm('是否确认删除选中的数据?', '删除', 
          {
          confirmButtonText: '确认', // 确认按钮
          cancelButtonText: '取消', // 取消按钮
          type: 'warning',// 警告的图标
          }
      )
      .then(() => {
         // 点击确认 删除操作
          $http({
              method:'delete',
              url:`http://localhost:8081/sfzy/sysPermission/${id}`,
               params:{}
          }).then(res=>{
              if(res.status== 200){
                  ElMessage.success('删除成功')
                  queryList();
              }else{
                  ElMessage.error('删除失败')
              }
          })
      })
      .catch(() => {
          ElMessage({
              type: 'info',
              message: "取消删除操作",
          })
})}


// 新增
function add1(){
title.value = '新增角色'
dialogFormVisible.value=true
}

function add(){
      $http({
          method:'post',
          url:'http://localhost:8081/sfzy/sysPermission',
          data:permissionData.value
      }).then(res=>{
          if(res.data.code== 200){
              ElMessage.success('添加成功')
          }else{
              ElMessage.success('添加失败')
          }
          //关闭添加 对话框
          dialogFormVisible.value= false;
          // 在做一次查询
          queryList();
          cancle();
        })
}
// 修改
function edit1(rowData){
title.value = '修改角色'
dialogFormVisible.value=true
permissionData.value=rowData
}

function edit(){
      $http({
          method:'put',
          url:'http://localhost:8081/sfzy/sysPermission',
          data:permissionData.value
      }).then(res=>{
          if(res.data.code== 200){
              ElMessage.success('修改成功')
          }else{
              ElMessage.success('修改失败')
          }
          //关闭添加 对话框
          dialogFormVisible.value= false;
          // 在做一次查询
          queryList();
          cancle();
        })
}

function confirm(){
if(title.value=='新增角色'){
  add();
}else{
  edit();
}
}

//关闭
function cancle(){
dialogFormVisible.value = false;
permissionData.value = {
  id:'',
name:'', 
type:'', 
url:'',
percode:'',
parentId:'',
sort:''
  }
  queryList();
}
</script>


<style scoped>

</style>
